<!doctype html>
<html>
  <head>
    <title>Red5 WebSocket Chat</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 86%; margin-right: .5%; }
      form button { width: 13%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
      #htmlside { border: 1px solid #0f0; margin: 0;}
      #flashside { border: 1px solid #00f; margin: 0;}
    </style>
  </head>
  <body>
    <p>This demonstrates bidirectional chat between HTML and Flash</p>
    <table>
	    <tr><td style="width:640px;height:480px;">
		    <div id="htmlside">
			    <ul id="htmlmessages"></ul>
			    <form action="">
			      <input id="htmlout" autocomplete="off" /><button>Send</button>
			    </form>    
		    </div>
	    </td><td style="width:640px;height:480px;">
		    <div id="flashside">
		
		    </div>
	    </td></tr>
    </table>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
    <script>
    $(document).ready(function(){
      var socket = new WebSocket('ws://localhost:8081/chat', 'chat');
      socket.onmessage = function(event){
        $('#htmlmessages').append($('<li>').text(event.data));
      };
      $('form').submit(function(){
        socket.send($('#htmlout').val());
        $('#htmlout').val('');
        return false;
      });
    });
    </script>
  </body>
</html>